<template>
  <view>
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="场景背题（35） " :background="background">
      <view class="u-nav-slot" slot="right" @click="addPapers">
      </view>
    </u-navbar>
    <u-cell-group class="container">
      <view class="container_search">
        <u-search placeholder="请输入您想搜的场景" v-model="scenceType" :clearabled="true" :show-action="false"></u-search>
      </view>
      <view class="container_title">
        场景分类
      </view>
      <view class="container_header">
        <view class="container_header_tag row">
          <u-tag :text="item.label" :type="item.type" @click="handleTagClick(item.label)" v-for="item in tagList" />
        </view>
      </view>



      <u-cell-item bg-color="#ECF3FC" icon="setting-fill" hover-class="cell-hover-class" title="电网GIS平台应用场景"
        @click="scenceSubject('changjing')"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="order" hover-class="cell-hover-class" title="如何调试断路器"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="lock" hover-class="cell-hover-class" title="如何调试变压器"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="home" hover-class="cell-hover-class" title="如何拆卸隔离开关"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="lock-open" hover-class="cell-hover-class" title="如何清洗变电设备"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="star" hover-class="cell-hover-class" title="如何处理变电设备绝缘油"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="trash" hover-class="cell-hover-class" title="如何更换直流系统设备"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="map" hover-class="cell-hover-class" title="如何进行电抗器定检"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="bell" hover-class="cell-hover-class" title="如何进行电抗器定检"></u-cell-item>
      <u-cell-item bg-color="#ECF3FC" icon="bag" hover-class="cell-hover-class" title="如何进行电抗器定检"></u-cell-item>

    </u-cell-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        scenceType: '',
        libs: ['mh_secur_4', 'mh_secur_5'],
        typeL: 'changkao',
        tagList: [{
            value: 1,
            label: '全部类',
            type: 'success'
          },
          {
            value: 2,
            label: '竞赛类',
            type: 'success'
          },
          {
            value: 3,
            label: '案例类',
            type: 'success'
          },
          {
            value: 4,
            label: '主题类',
            type: 'success'
          },
          {
            value: 5,
            label: '安规类',
            type: 'success'
          },
          {
            value: 6,
            label: '专业类',
            type: 'warning'
          },
          {
            value: 7,
            label: '政治类',
            type: 'success'
          },
          {
            value: 8,
            label: '其他类',
            type: 'success'
          }
        ]
      };
    },
    methods: {
      backIndex() {
        uni.navigateback();
      },
      handleTagClick(title) {
        this.tagList.map((item) => {
          if (item.label === title) {
            item.type = 'warning'
          } else {
            item.type = 'success'
          }
        })
        // this.tagType = title
      },
      scenceSubject(type) {
        uni.navigateTo({
          url: '../../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: async (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type
              },
              apifunc: {
                examList: this.getExamList
              },
              title: '常考考点背题',
              typeL: this.typeL
            })
          }

        })
      },
      getExamList(params = {}) {
        return new Promise((resolve, reject) => {
          uni.request({
            url: 'https://fc-mp-80740b3d-3f1f-452a-9661-5ab000526a80.next.bspapp.com/api/application/examList',
            data: params,
            method: 'POST',
            success: (res) => {
              res = {
                data: [{
                  "_id": "9ea42e7b-1980-11ef-98a0-0242ac110009",
                  "from_lib": "mh_secur_4",
                  "exam_id": "mh_secur_4_0",
                  "exam_index": 1,
                  "exam_type": 0,
                  "exam_title": "<div>电网GIS平台2.0图形可视化服务不包括（     ）。</div>",
                  "exam_option": [{
                      "key": "A",
                      "value": "<div>轻量级图形编辑</div>"
                    },
                    {
                      "key": "B",
                      "value": "<div>坐标保密技术处理</div>"
                    },
                    {
                      "key": "C",
                      "value": "<div>可视化服务与组件、坐标保密处理、单线图展示</div>"
                    },
                    {
                      "key": "D",
                      "value": "<div>兴趣点搜索、精准定位、导航规划等能力</div>"
                    }
                  ],
                  "exam_answer": [
                    "C"
                  ],
                  "correct_answer": [
                    "D"
                  ],
                  "analysis": "<div>电网GIS平台2.0图形可视化服务不包括兴趣点搜索、精准定位、导航规划等能力，该服务属于基础地图服务。</div>",
                  "comment": "mh_secur_备注",
                  "aiAnalysis": "您需要区分可视化服务和基础地图服务的区别，可视化服务包括：轻量图形编辑、坐标保密技术处理、可视化服务与组件、坐标保密处理及单线图展示。",
                  "summary": "软件的通用服务一般在1.0版上线，后续会迭代更精细化的服务。",
                  "associatedWords": []
                }],
                "code": 200,
                "success": true,
                "message": "Request Success",
                "querytime": 1715594394288,
                "timeCost": 60
              }

              resolve(res.data)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 10rpx;
    margin-right: 10rpx;
    .container_header {
      margin-top: 10rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      // margin: 20rpx;
      background-color: aliceblue;
      border-radius: 20rpx;

      .container_header_tag {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;

        .u-tag {
          width: 120rpx;
          margin: 5px;
          /* 根据需要调整间距 */
        }
      }

    }

    .container_search {
      margin: 20rpx 0;
    }

    .container_title {
      text-align: center;
    }
  }

  .u-cell-box {
    width: auto;
  }

  .cell-hover-class {
    background-color: #2663C9;
  }

  /* 或者单是设置透明度 */
  .cell-hover-class {
    opacity: 0.5;
  }

  .u-cell-box {
    // margin: 20rpx;
    // width: 90%;
  }

  .u-cell {
    border-radius: 20rpx;
    margin-bottom: 15rpx;
    line-height: 35px;
  }

  .u-border-bottom:after {
    border: none;
  }
</style>